<template>
	<div id="home">
		<mainHeader></mainHeader>
		<div class="container-fluid">
			<div class="row">
				<div style="width: 110px;float: left;">
					<div class="left-list">
						<ul>
							<li class="cat" v-for="(cat,index) in catList">
								<!--<i class="iconfont navIcon" v-bind:class="aaa(index)"></i>-->
								<svg class="icon" aria-hidden="true">
									<use :xlink:href="aaa(index)"></use>
								</svg>
								<a href="#">{{cat.name}}</a>
								<div>
									<ul>
										<li v-for="item in cat.list" @click="findRecipesByCat(item.id)">
											{{item.name}}
										</li>
									</ul>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="flex">
					<div v-for="(item,index) in recipesList" style="float: left;margin-left: 5px;">
						<router-link :to="{path:'/detail/'+item.id}">
							<img v-bind:src="item.albums" />
						</router-link>
						<router-link :to="{path:'/detail/'+item.id}">
							<p>
								{{item.title}}
							</p>
						</router-link>
					</div>

					<div style="float: left;margin-left: 5px;height: 0;border: 0;"></div>
					<div style="float: left;margin-left: 5px;height: 0;border: 0;"></div>
					<div style="float: left;margin-left: 5px;height: 0;border: 0;"></div>
					<div style="float: left;margin-left: 5px;height: 0;border: 0;"></div>
					<div style="float: left;margin-left: 5px;height: 0;border: 0;"></div>
				</div>
			</div>
		</div>
		<mainFooter></mainFooter>
	</div>
</template>

<script>
	import mainHeader from '@/components/mainHeader'
	import mainFooter from '@/components/mainFooter'
	import bus from '../bus.js'
	export default {
		name: 'home',
		data() {
			return {
				catList: [],
				iconList: ['#icon-caipin', '#icon-guanxitu', '#icon-shizhong', '#icon-xiaolian', '#icon-changjing', '#icon-gongyi', '#icon-caipinguanli',
					'#icon-rice', '#icon-_xican', '#icon-tang', '#icon-qita', '#icon-renqun', '#icon-xinxieguanjibing', '#icon-zhurou', '#icon-jirou',
					'#icon-yu', '#icon-shucaishuiguo', '#icon-shuiguo', '#icon-mian', '#icon-riyueli', '#icon-chunjiexiaoxitubiao', '#icon-icon-test', '#icon-ziyuan',
					'#icon-qita1', '#icon-zuofakouwei', '#icon-duoyuanhua', '#icon-shuiguo1', '#icon-tiaoweiliao'
				],
				recipesList: [],
			}
		},
		components: {
			mainHeader,
			mainFooter
		},
		computed: {
			aaa(index) {
				return(index) => {
					return this.iconList[index];
				}

			},
			bbb(index) {
				return index;
			}
		},
		mounted() {
			var _this = this;
			document.getElementsByTagName('body')[0].style.overflow = 'auto';
			//菜谱详情页面传参
			var til = this.$route.params.title;
			if(til != undefined) {
				bus.$emit('send2',til);
				console.log('进入')
				this.$axios.get("/recipes/bytil?title=" + til, {}).then(res => {
					_this.recipesList = res.data.data;
					for(var i = 0; i < _this.recipesList.length; i++) {
						_this.recipesList[i].albums = JSON.parse(_this.recipesList[i].albums)[0];
					}
					console.log(res.data.data);
				});
			} else {
				this.$axios.get("/recipes/bycat/1", {}).then(res => {
					_this.recipesList = res.data.data;
					for(var i = 0; i < _this.recipesList.length; i++) {
						_this.recipesList[i].albums = JSON.parse(_this.recipesList[i].albums)[0];
					}
					//console.log(_this.recipesList);
				});
			}

			this.$axios.get("/category/all/cat", {}).then(res => {
				_this.catList = res.data.data;
				//console.log(_this.catList);
			});

			_this.searchRec = function() {
				console.log(11);
			}

			bus.$on('send', function(msg) {
				this.$axios.get("/recipes/bytil?title=" + msg, {}).then(res => {
					_this.recipesList = res.data.data;
					for(var i = 0; i < _this.recipesList.length; i++) {
						_this.recipesList[i].albums = JSON.parse(_this.recipesList[i].albums)[0];
					}
					//console.log(res.data.data);
				});
			})

			_this.searchRecipesByCat = function(catId) {
				this.$axios.get("/recipes/bycat/" + catId, {}).then(res => {
					_this.recipesList = res.data.data;
					for(var i = 0; i < _this.recipesList.length; i++) {
						_this.recipesList[i].albums = JSON.parse(_this.recipesList[i].albums)[0];
					}
					console.log(res.data.data);
				});
			}
		},
		methods: {
			search() {
				this.searchRec();
			},
			findRecipesByCat(catId) {
				this.searchRecipesByCat(catId);
			},
		}
	}
</script>

<style scoped>
	#home {
		height: 100px;
		width: 100%;
		padding-top: 100px;
	}
	
	.container-fluid {
		margin-top: 17px;
	}
	
	.left-list {
		width: 100px;
		font-size: 14px;
	}
	
	.left-list .navIcon {
		font-size: 20px;
		/*color: #FF0000;*/
	}
	
	.row {
		background: #fff;
		height: 800px;
		border-color: #000000;
		width: 1000px;
		margin: 0 auto;
	}
	
	.left-list li.cat {
		position: relative;
		background: #fff;
		width: 100px;
		height: 33px;
		display: inline-block;
		list-style: none;
		color: #000;
		border: 1px solid transparent;
		margin-bottom: 8px;
	}
	
	.left-list li.cat:nth-of-type(1) {
		font-size: 16px;
	}
	
	.left-list li.cat:hover {
		border-right-color: transparent;
	}
	
	li a {
		color: #000000;
		text-decoration: none;
	}
	
	li a:hover {
		color: #f66;
	}
	
	.icon {
		font-size: 26px;
		margin-top: 2px;
	}
	/*.catpage {
		position: absolute;
		z-index: 10;
		border-color: #000000;
	}
	*/
	
	.cat {
		position: relative;
	}
	
	.cat div {
		padding: 20px;
		position: absolute;
		left: 99px;
		width: 300px;
		border: 1px solid #ccc;
		border-radius: 5px;
		box-shadow: 10px 3px 13px 0px rgba(0, 0, 0, 0.4);
		top: 10px;
		display: none;
		z-index: 999;
		background: #fff;
	}
	
	.cat div ul li {
		display: inline-block;
		width: 33%;
		cursor: pointer;
		line-height: 24px;
		text-align: center;
	}
	
	.cat div ul li:hover {
		color: #f66;
	}
	
	.cat:hover div {
		display: block;
	}
	
	.flex {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		float: right;
		width: 880px;
	}
	
	.flex div {
		width: 192px;
		height: 260px;
		border: 1px solid #C8CBCF;
		box-shadow: 0 0 8px #ad9393;
		border-radius: 6px;
		margin-bottom: 30px;
		cursor: pointer;
	}
	
	.flex div:hover {
		box-shadow: 0 0 15px #f66;
	}
	
	.flex div:hover p {
		color: #f66;
	}
	
	.flex div img {
		width: 190px;
		height: 190px;
		border: 0;
		border-radius: 6px 6px 0 0;
		cursor: pointer;
	}
	
	.flex div p {
		margin-top: 30px;
		width: 100%;
		font-size: 18px;
		color: #5A6268;
		text-align: center;
		cursor: pointer;
	}
	
	.flex a {
		text-decoration: none;
	}
</style>